<template>
  <div class="nav-bar">
    <div class="nav-left">
      <h2 class="logo">
        <el-icon><Document /></el-icon>
        PDF转PPT工具
      </h2>
    </div>
    <div class="nav-right">
      <template v-if="authStore.isAuthenticated">
        <el-button type="text" @click="$router.push('/')" class="nav-link">
          <el-icon><HomeFilled /></el-icon>
          首页
        </el-button>
        <el-button type="text" @click="$router.push('/history')" class="nav-link">
          <el-icon><Clock /></el-icon>
          历史记录
        </el-button>
        <el-dropdown @command="handleCommand">
          <el-button type="text" class="nav-link">
            <el-icon><User /></el-icon>
            {{ authStore.user?.username }}
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <template v-else>
        <el-button type="text" @click="$router.push('/login')" class="nav-link">
          登录
        </el-button>
        <el-button type="text" @click="$router.push('/register')" class="nav-link">
          注册
        </el-button>
      </template>
    </div>
  </div>
</template>

<script>
import { useAuthStore } from '../stores/auth'

export default {
  name: 'NavBar',
  setup() {
    const authStore = useAuthStore()

    const handleCommand = (command) => {
      if (command === 'logout') {
        authStore.logout()
        window.location.href = '/login'
      }
    }

    return {
      authStore,
      handleCommand
    }
  }
}
</script>

<style scoped>
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.nav-left .logo {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 20px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-link {
  color: white !important;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

.el-dropdown {
  color: white;
}
</style> 